<template>
  <el-container>

    <!--侧边栏-->
    <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529;">

      <div style="height: 60px;  color: white; display: flex; align-items: center; justify-content: center;">
          <img src="@/assets/img_1.png" alt="" style="width: 40px; height: 40px; ">
          <span class="logo-title"  v-show="!isCollapse">仓库总管界面</span>
      </div>

      <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style="border: none;" default-active="/home">
        
<!--        <el-menu-item index="">
            <el-icon><HomeFilled /></el-icon>
            <span slot="title">首页</span>          
        </el-menu-item>-->

        <el-menu-item @click="inventory">
            <el-icon><Box /></el-icon>
            <span slot="title">库存</span>          
        </el-menu-item>

        <el-sub-menu index="1">
          <template #title>
            <el-icon><Menu /></el-icon>
            <span>出入库</span>
          </template>
            <el-menu-item index="/put">入库</el-menu-item>
            <el-menu-item index="/out">出库</el-menu-item>
        </el-sub-menu>

<!--        <el-sub-menu index="2">
          <template #title>
            <el-icon><Menu /></el-icon>
            <span>流水</span>
          </template>
          <el-menu-item index="/salesin">入库</el-menu-item>
          <el-menu-item index="/salesout">出库</el-menu-item>
          <el-menu-item index="/statistics">流水图</el-menu-item>
        </el-sub-menu>-->

      </el-menu>

    </el-aside>

    <el-container>

        <!--头部-->
        <el-header>
            <el-icon @click="handleCollapse" class="actionButton"><Operation /></el-icon>

            <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
                <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>

            <div >
                <el-dropdown style="margin-left: 1200px;margin-top: -28px">
                    <el-avatar> {{role}}</el-avatar>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="logout">退出</el-dropdown-item>

                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <div style="text-align: right">
                    <span @click.stop="toggleDark()">暗黑模式</span>
                    <el-switch size="small" v-model="isDark"></el-switch>
                </div>
            </div>

        </el-header>

      <!--主体-->
      <el-main>
        <RouterView />
      </el-main>

    </el-container>

  </el-container>
  
</template>

<script  setup>
import { ref } from 'vue';
import {logout} from '@/net'
import router from "@/router";
import {Menu,HomeFilled,Box,Operation,ArrowRight} from '@element-plus/icons-vue'
const isCollapse = ref(false);
const asideWidth = ref('200px');
const role=ref(sessionStorage.getItem('role'))
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
  asideWidth.value = isCollapse.value ? '80px' :'200px'
};
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

const inventory=()=>{
    router.push({
        name:'inventory1'
    })
}
</script>

<style>
.el-menu-item.is-active{
  background-color: #1890ff !important;
  border-radius: 4px ;
  margin: 4px;
}

.el-menu-item{
  height: 50px;
  line-height: 40px;
}

.actionButton{
  height: 40px; 
  margin-top:10px;
  font-size: 25px;
}

.el-aside{
  transition: width .3s;
}

.logo-title{
  margin-left: 5px; 
  font-size: 20px;
  transition: width .3s;
}

.el-header{
  box-shadow:2px 0 6px rgba(0,21,41,.35)
}

.breadcrumb{
  margin-left: 45px;
  margin-top: -30px;
  font-size: 20px;
}

</style>